<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clock</title>
    <style>
        .clock {
            height: 600px;
            width: 600px;
            border-radius: 50%;
            border: 3px solid black;
            position: relative;
        }
        .num {
            position: absolute;
            font-size: 32px;
            top: 50%;
            left: 50%;
            /* transform: translateY(-270px) translate(-50%, -50%); */
        }
        .scale {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 10px;
            width: 1px;
            background: black;
        }
        .scale.long {
            height: 16px;
        }

        .hour-hand,
        .minute-hand,
        .second-hand {
            position: absolute;
            background: black;
            top: 50%;
            left: 50%;
            transform-origin: center top;
            /* transform: translateX(-50%) rotate(180deg); */
        }

        .hour-hand {
            height: 120px;
            width: 8px;
        }
        .minute-hand {
            height: 180px;
            width: 4px;
        }
        .second-hand {
            height: 240px;
            width: 1px;
        }

    </style>
</head>
<body>
    <div class="clock">
        <!-- <div class="num">1</div> -->
        <!-- <div class="scale"></div> -->
        <div class="hour-hand"></div>
        <div class="minute-hand"></div>
        <div class="second-hand"></div>
    </div>

    <script>

        const clock = document.querySelector('.clock');
        const hHand = document.querySelector('.hour-hand');
        const mHand = document.querySelector('.minute-hand');
        const sHand = document.querySelector('.second-hand');

        // 生成1到12的数字
        function createNumbers () {
            for (let i = 0; i < 12; i++) {
                const num = i === 0 ? 12 : i;
                const alpha = i * 30;
                const div = document.createElement('div');
                div.setAttribute('class', 'num');
                div.setAttribute('style', `transform: translate(-50%, -50%) rotate(${ alpha }deg) translateY(-270px) rotate(${ -alpha }deg)`);
                div.innerText = num;
                clock.appendChild(div);
            }
        }

        // 生成刻度
        function createScales () {
            for (let i = 0; i < 60; i++) {
                const alpha = i * 6;
                const length = i % 5 === 0 ? 16 : 10;
                const div = document.createElement('div');
                div.setAttribute('class', i % 5 === 0 ? 'scale long' : 'scale');
                div.setAttribute('style', `transform: translate(-50%, -50%) rotate(${ alpha }deg) translateY(-${ 300 - length * .5 }px)`);
                clock.appendChild(div);
            }
        }

        // 设置不同针的旋转
        function run () {
            const date = new Date();
            // 时分秒
            const h = date.getHours(); // 0 ~ 24
            const m = date.getMinutes(); // 0 ~ 60
            const s = date.getSeconds(); // 0 ~ 60

            // 计算秒针角度
            const angleS = s * 6; // 每秒占6度
            // 计算分针角度
            const angleM = (m + s / 60) * 6; // 每分占6度
            // 计算时针角度
            const angleH = (h + m / 60 + s / 3600) * 30; // 每小时占30度

            // 把角度分发给时分秒针
            sHand.setAttribute('style', `transform: translateX(-50%) rotate(180deg) rotate(${ angleS }deg)`);
            mHand.setAttribute('style', `transform: translateX(-50%) rotate(180deg) rotate(${ angleM }deg)`);
            hHand.setAttribute('style', `transform: translateX(-50%) rotate(180deg) rotate(${ angleH }deg)`);
        }

        createNumbers();
        createScales();
        // 每隔一秒运行一次run函数
        run();
        setInterval(run, 1000);

    </script>

</body>
</html>